<template>
  <info-card
    :name="currentSong.name"
    :coverImgUrl="currentSong.picUrl"
    :introduce="introduce"
  />
  <interval height="30" />
  <el-row class="comment" justify="end">
    <el-col :span="22" :xs="24">
      <el-carousel :interval="4000" type="card" height="1.4rem">
        <el-carousel-item v-for="item in commentList" :key="item.commentId">
          <div class="user">
            <img :src="item.user.avatarUrl" alt="网络不好" class="avatar" />
            <span class="name">{{ item.user.nickname }}</span>
          </div>
          <div class="content">
            <p>{{ item.content }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Interval from '@/components/interval/interval.vue'
import { useStore } from 'vuex'
import InfoCard from '../info-card/info-card.vue'

export default defineComponent({
  props: {
    currentSong: Object
  },
  components: {
    Interval,
    InfoCard
  },
  async setup(props) {
    const store = useStore()
    const currentId = ref(props.currentSong?.id)
    /* 发起请求 存储热评数据 */
    await store.dispatch({
      type: 'index/getCommentListAction',
      id: currentId.value
    })
    /* 获取数据 */
    const commentList = store.state.index.commmentList
    /* 获取歌手数据 */
    const introduce = {
      artist: props.currentSong?.artist
    }
    return {
      commentList,
      introduce
    }
  }
})
</script>

<style scoped lang="less">
.song {
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 2px 2px 4px rgba(201, 114, 114, 0.432);
  img {
    width: 80px;
    height: 80px;
    float: left;
    margin: 4px 20px 4px 10px;
    border-radius: 40px;
    border: 2px solid #fff;
  }
  .title {
    height: 50px;
    line-height: 60px;
    font-size: 26px;
    color: rgb(184, 0, 0);
    font-weight: 600;
  }
  .artist {
    height: 30px;
    line-height: 30px;
    color: rgb(104, 104, 104);
  }
}
.comment {
  .user {
    .avatar {
      width: 40px;
      height: 40px;
      float: left;
      border: 2px solid #fff;
      margin: 0.1rem 0.2rem 0.2rem 0.1rem;
    }
    .name {
      display: inline-block;
      font-style: italic;
      font-size: 0.14rem;
      color: rgb(85, 85, 85);
      margin: 0.12rem 0.1rem 0.1rem 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 45%;
    }
  }
  .content {
    height: 0.72rem;
    font-size: 0.16rem;
    text-indent: 0.2rem;
    color: rgb(160, 0, 0);
    margin: 0 0.1rem 0.1rem 0;
    overflow: hidden;
    p {
      height: 0.24rem;
      line-height: 0.24rem;
    }
  }
  .el-carousel__item {
    background-color: #e9c5bad0;
  }
  ::v-deep .el-carousel__button {
    border: 1px solid gray;
    width: 4px;
    height: 4px;
    border-radius: 50%;
  }
}
</style>
